@extends('index.layouts.app')

@section('header')
    <link href="{{ asset('/font-awesome/css/font-awesome.min.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('/admin/layui/css/layui.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('/css/index/master.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('/css/index/gloable.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('/css/index/nprogress.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('/css/index/blog.css') }}" rel="stylesheet" type="text/css">
@endsection
@section('content')
    <div class="doc-container" id="doc-container">
        <div class="container-fixed">
            <div class="col-content">
                <div class="inner">
                    <article class="article-list bloglist" id="LAY_demo1" style="background: #fff">
                        <div class="layui-form" style="margin-top: 20px;padding: 10px">
                            <div class="layui-form-item">
                                <label class="layui-form-label">输入框</label>
                                <div class="layui-input-block">
                                    <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">密码框</label>
                                <div class="layui-input-inline">
                                    <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux">辅助文字</div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">日期范围</label>
                                    <div class="layui-inline" id="test-range">
                                        <div class="layui-inline">
                                            <div class="layui-input-inline lay-search" style="width: 300px">
                                                <input type="text" name="created_at" class="layui-input" id="sel_datetime" placeholder="创建时间：开始时间 - 结束时间" >
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" >立即提交</button>
                                </div>
                            </div>
                        </div>
                        <hr>



                        <div id="chart01" class="layui-card-border card-min-height" style="min-height: 500px;"></div>
                    </article>
                </div>
            </div>

        </div>
    </div>

@endsection
@section('scripts')
    <script src="{{ asset('/admin/layui/layui.js') }}"></script>
    <script src="{{ asset('/js/jquery.min.js') }}"></script>
    <script src="{{ asset('/js/echarts/echarts.min.js') }}"></script>
    <script src="{{ asset('/js/index/gloable.js') }}"></script>
    <script src="{{ asset('/js/index/nprogress.js') }}"></script>
    <script src="{{ asset('/js/index/pagecomment.js') }}"></script>
    <script>NProgress.start();</script>
    <script>
        layui.config({
            base: '../admin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'table', 'form', 'laydate'], function(){
            var $ = layui.$
                ,form = layui.form
                ,table = layui.table
                ,laydate = layui.laydate;

            laydate.render({
                elem: '#sel_datetime'
                ,type: 'datetime'
                ,range: true
            });
        });




        window.onload = function () {
            NProgress.done();
        };
        function formatterTime(value){
            var date = new Date(value);
            var texts = [];
            texts[0] = [date.getFullYear(),timeDoubleDigit(date.getMonth() + 1), timeDoubleDigit(date.getDate())];
            texts[1] = [timeDoubleDigit(date.getHours()), timeDoubleDigit(date.getMinutes()), timeDoubleDigit(date.getSeconds())];
            return texts;
        }
        function timeDoubleDigit(value){
            return value < 10 ? '0' + value: value;
        }
        function getLegendName(data) {
            var arr = [];
            for(var i = 0;i<data.length;i++) {
                arr.push(this.data[i].name);
            }
            return arr;
        }

       /* 获取图表数据 */
        var chartDatas_data_zj = [];
        var chartDatas_data_cost = [];
        var chartDatas_data_pksh = [];
        var chartDatas_data_pksh_list = [];
        var chartDatas_data_cjl = [];
        $.ajax({
            type:"get",
            url:"{{ route('get_cost_line') }}" + "?id=000100",
            async: false,
            success:function(obj){
                chartDatas_data_zj = obj.data_jg;
                chartDatas_data_cost = obj.data_zlzj;
                chartDatas_data_pksh = obj.data_pk_one;
                chartDatas_data_pksh_list = obj.data_pk_list;
                chartDatas_data_cjl = obj.data_cjl;
            }
        });

        var option = {
            color: ['#1a80ff', '#ff8c1b', '#67c23a'],
            calculable : true,
            title: {
                text: '实时价格',
                    textStyle: {
                        fontSize: 14
                    }
             },
            tooltip: {
                trigger: 'axis',
                backgroundColor: '#fff',
                textStyle: {
                    color: '#38455d',
                        fontSize: 12
                },
                axisPointer: {
                    lineStyle:{
                        color: '#95b9f7',
                        type: 'dashed'
                    }
                },
                extraCssText: 'box-shadow: 0 2px 10px rgba(50,67,81,.3)'
            },
            legend: {
                data:['实时价格'],
            },
            grid: {
                left: '60',
                right: '20',
                top: '30',
                bottom: '40',
            },
            xAxis: {
                type: 'category',
                    data: chartDatas_data_zj.map(function (item) {
                        return item[0];
                    }),
                    boundaryGap: false,
                    splitLine: {
                    show: true,
                        lineStyle: {
                        color: '#e5e8ef',
                            type: 'dashed'
                    }
                },
                axisLine:{
                    lineStyle:{
                        color: '#e5e8ef'
                    }
                },
                axisLabel: {
                    show: true,
                        textStyle: {
                        color: '#646b7f'
                    },
                    formatter: function (value) {
                        return formatterTime(value)[1].join(':') + '\n'+ formatterTime(value)[0].splice(1, 2).join('-');
                    }
                }
            },
            yAxis: [
                {
                    name:'',
                    type:'value',
                    min:'dataMin',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#646b7f',
                        }

                    },
                    splitLine: {
                        show: true,
                        lineStyle:{
                            color: '#e5e8ef',
                            type: 'dashed'
                        }
                    },
                    axisLine:{
                        lineStyle: {
                            color: '#e5e8ef',
                            width: 3
                        }
                    }
                }
            ],
            series: {
                name: '实时价格',
                type: 'line',
                symbol: 'none',
                itemStyle: { color: '#c21f31'},
                // smooth:true,
                data: chartDatas_data_zj.map(function (item) {
                    return item[1];
                })
            },
            animationEasing: 'elasticOut'
        };

        var myChart01 = echarts.init(document.getElementById('chart01'));
        myChart01.setOption(option);



    </script>
@stop
